<html>
    <head>
        <!-- Because I can -->
        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script>jQuery.noConflict();</script>
        <script src="/extjs/adapter/prototype/ext-prototype-adapter.js"></script>
        <script src="/extjs/ext-all-debug.js"></script>
        <!--<script src="/WM/extjs/ext-all.js"></script>-->
        <script src="/lib/wm.dataproxy.js"></script>
        <link href="/extjs/resources/css/ext-all.css" type="text/css"  rel="stylesheet" />
        <!--<link href="/WM/extjs/resources/css/xtheme-gray.css" type="text/css" rel="stylesheet" />-->
    </head>
    <body>
        <script>
            /*
            { id:"" ,name:"" ,password:"" ,name_full:"" ,type:"" ,date_created:"" ,date_modified:""}
           */
           if (typeof wm.router === "undefined") {
               console.info("WARNING WMProxy is in debugging state!");
               
               wm.router = {
                   makeRequest: function (method, params, callback){
                       console.debug(arguments.callee, arguments.callee.argumentNames().zip(arguments));
                       this.auth.load(callback);
                   },
                   
                   auth: {
                       read: function(callback){
                           var data = {
                               metaData: {
                                   "idProperty": "id",
                                   "root" : "rows",
                                   "totalProperty" : "rowCount",
                                   "successProperty": "success",
                                   "fields" : [
                                       {name: "id"},
                                       {name: "name"}, {name: "password"},
                                       {name: "name_full"}, {name: "type"},
                                       {name: "date_created"},{name: "date_modified"}
                                   ]
                               },
                               rows:[
                                   { id:"1" ,name:"test" ,password:"1234" ,name_full:"test 1" ,type:"admin" ,date_created:"" ,date_modified:""},
                                   { id:"2" ,name:"foo" ,password:"abcd" ,name_full:"test 2" ,type:"user" ,date_created:"" ,date_modified:""}
                               ],
                               rowCount: 2,
                               success: true                    
                           }
                           callback.delay(2, data);
                           
                       }
                   }
               };
           }
        </script>
        <script>
        //Split out 2 it's own tag because this part SHOULD NOT interfere with the above
        Ext.onReady(function(){
        new Ext.Viewport({
                    title: "Test grid",
                    layout: "fit",
                    items:[{            
                        xtype: "grid",
                        id: "testGrid",
                        height: 250,
                        width: 300,
                        store: new Ext.data.Store({
                                    id: "myStore",
                                    proxy: new wmlib.data.WMProxy("auth","users"),
                                    reader: new Ext.data.JsonReader(),                                    
                                    writer: new Ext.data.JsonWriter(), 
                                    autoLoad: true                        
                                }),
                        columns: [
                            {id: "id"},
                            {header: "Name", dataIndex: "name"},
                            {header: "password", dataIndex: "password"},
                            {header: "name_full", dataIndex: "name_full"},
                            {header: "type", dataIndex: "type"},
                            {header: "date_created", dataIndex: "date_created"},
                            {header: "date_modified", dataIndex: "date_modified"}
                        ]
                    }]
        });    });    
        </script>
    </body>
</html>